<template>
  <div class="ManageView">
    <!-- 图表 -->
    <div class="DataBox1 box-shadow">
      <a-table
        :columns="columns"
        :row-key="(record) => record.key"
        :data-source="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="name" slot-scope="name">
          {{ name.first }} {{ name.last }}
        </template>
        <span slot="tags" slot-scope="tags">
          <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="colors[Math.floor(Math.random() * colors.length)]"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
        <span slot="decoration" slot-scope="decoration">
          <a-tag
            :color="
              decoration === '精装修'
                ? 'green'
                : decoration === '简单装修'
                ? 'pink'
                : decoration === '豪华装修'
                ? 'red'
                : decoration === '毛坯'
                ? 'cyan'
                : 'volcano'
            "
          >
            {{ decoration }}
          </a-tag>
        </span>
        <span slot="up_time" slot-scope="up_time">
          {{ parseTime(up_time, "{y}-{m}-{d}") }}
        </span>
        <!-- 可编辑价格、面积 -->
        <template
          v-for="col in ['price', 'square', 'unit_price']"
          :slot="col"
          slot-scope="text, record"
        >
          <div :key="col">
            <a-input
              v-if="record.editable"
              style="margin: -5px 0"
              :value="text"
              @change="(e) => handleChange(e.target.value, record.key, col)"
            />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <!-- 操作区 -->
        <template slot="operation" slot-scope="text, record">
          <div class="editable-row-operations">
            <span v-if="record.editable">
              <a @click="() => save(record.key)">保存</a>
              <a-popconfirm
                title="Sure to cancel?"
                @confirm="() => cancel(record.key)"
              >
                <a>取消</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <a :disabled="editingKey !== ''" @click="() => edit(record.key)"
                >修改</a
              >
            </span>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
const columns = [
  {
    dataIndex: "key",
    key: "key",
    title: "索引",
    slots: { title: "customTitle" },
    scopedSlots: { customRender: "key" },
  },
  {
    title: "区县",
    dataIndex: "city",
    key: "city",
  },
  {
    title: "区域",
    dataIndex: "area",
    key: "area",
    align: "center",
  },
  {
    title: "小区",
    dataIndex: "comm",
    key: "comm",
    align: "center",
  },
  {
    title: "评分(10.0分制)",
    dataIndex: "score",
    key: "score",
    align: "center",
  },
  {
    title: "价格(万)",
    dataIndex: "price",
    key: "price",
    align: "center",
    scopedSlots: { customRender: "price" },
  },
  {
    title: "面积(m²)",
    dataIndex: "square",
    key: "square",
    align: "center",
    scopedSlots: { customRender: "square" },
  },
  {
    title: "单价(元/m²)",
    dataIndex: "unit_price",
    key: "unit_price",
    align: "center",
    scopedSlots: { customRender: "unit_price" },
  },
  {
    title: "房型",
    dataIndex: "house_type",
    key: "house_type",
  },
  {
    title: "房龄",
    dataIndex: "house_year",
    key: "house_year",
  },
  {
    title: "所在楼层",
    dataIndex: "floor",
    key: "floor",
    align: "center",
  },
  {
    title: "总楼层",
    dataIndex: "sum_floor",
    key: "sum_floor",
    align: "center",
  },
  {
    title: "朝向",
    dataIndex: "orientation",
    key: "orientation",
    align: "center",
  },
  {
    title: "装修情况",
    dataIndex: "decoration",
    key: "decoration",
    align: "center",
    scopedSlots: { customRender: "decoration" },
  },

  {
    title: "上传时间",
    dataIndex: "up_time",
    key: "up_time",
    align: "center",
    scopedSlots: { customRender: "up_time" },
  },
  // {
  //   title: "地址",
  //   dataIndex: "address",
  //   key: "address",
  // },
  {
    title: "标签",
    key: "tags",
    dataIndex: "tags",
    scopedSlots: { customRender: "tags" },
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
  },
];
import { parseTime } from "../utils/date";
import axios from "axios";
const base = process.env.NODE_ENV === "development" ? "/api" : "";
export default {
  data() {
    return {
      columns,
      data: [],
      pagination: { total: 200, pageSize: 23 },
      loading: false,
      colors: ["pink", "red", "orange", "green", "cyan", "blue", "purple"],
      editingKey: "",
    };
  },
  mounted() {
    this.loadData(1, 23);
  },
  methods: {
    handleTableChange(pagination) {
      console.log(pagination);
      this.loadData(pagination.current, pagination.pageSize);
    },
    // 获取数据
    loadData(page, pagesize) {
      this.loading = true;
      axios({
        method: "post",
        url: base + "read_csv_data",
        data: {
          page,
          pagesize,
        },
        headers: { "content-type": "application/x-www-form-urlencoded" },
      })
        .then((response) => {
          console.log(response);
          const pagination = { ...this.pagination };
          pagination.total = response.data.data.sum_num;
          this.data = response.data.data.record;
          this.cacheData = response.data.data.record.map((item) => ({
            ...item,
          }));
          this.pagination = pagination;
          this.loading = false;
        })
        .catch(function (error) {
          console.log(error); // 打印失败的结果
        });
    },
    parseTime,
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.find((item) => key === item.key);
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.find((item) => key === item.key);
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.find((item) => key === item.key);
      const targetCache = newCacheData.find((item) => key === item.key);
      console.log(targetCache);
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = "";
      this.$message
        .loading("数据同步中..", 2.5)
        .then(() => this.$message.success("数据同步成功", 2.5))
        .then(() =>
          this.$notification.open({
            message: "聚类分析已完成",
            description:
              "聚类分析已完成！您可以查看分析结果并进行下一步操作。请注意保存您的结果以便后续使用。",
            icon: <a-icon type="smile" style="color: #108ee9" />,
          })
        );
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.find((item) => key === item.key);
      this.editingKey = "";
      if (target) {
        Object.assign(
          target,
          this.cacheData.find((item) => key === item.key)
        );
        delete target.editable;
        this.data = newData;
      }
    },
  },
};
</script>
<style scoped>
.ManageView {
  flex: 1;
  background-color: #ffffff;
  height: 100vh;
  overflow-y: auto;
}
.DataBox1 {
  padding-top: calc((100vw - 80px) * 0.01);
  margin: calc((100vw - 80px) * 0.01);
  margin-bottom: 0;
  border-radius: 25px;
}
.box-shadow {
  box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1);
}
.flex {
  display: flex;
}
.editable-row-operations a {
  margin-right: 8px;
}
</style>
